<template>
    <!-- html -->
    <div class="Route">
        <h3>this is Route.</h3>
        <div>
            <RouterLink to="/home" active-class="xzpeq">首页</RouterLink>
            <RouterLink :to="{ name: 'wenzhang' }" active-class="xzpeq">文章</RouterLink>
            <RouterLink :to="{ path: '/navigationxq' }" active-class="xzpeq">详情</RouterLink>
        </div>
        <div style="background-color: bisque;">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<!-- 安装 vue 路由模块  npm install vue-router -->

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Route'>
// import { onMounted, onUnmounted } from 'vue';
import { RouterView, RouterLink, useRouter } from 'vue-router';
// const router = useRouter()
//挂载函数
// onMounted(() => {
//     console.log(1)
//     setTimeout(() => {
//         //编程式导航
//         // router.push("/navigationxq")
//         //无历史跳转 不能返回
//         router.replace("/navigationxq")
//     }, 3000)
// })

</script>


<style scoped>
/* 样式 */
.Route {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}

.xzpeq {
    background-color: blue;
}
</style>